<template>
  <div class="container">
    <div class="panel pad-t-18 pad-b-22 pad-l-20 pad-r-20" :class="'type-' + order.orderStatus" @click="queryExpress">
      <h1 class="font-w font-16">{{orderStatusText}}</h1>
      <div class="font-12 mar-t--2">{{orderStatusTips}}</div>
      <van-icon v-if="(order.orderStatus === 2) || (order.orderStatus === 3) || (order.orderStatus === 4)" name="arrow" class="arrow-right" size="20px" color="#fff"/>
    </div>
    <div v-if="order.orderType != 20 && order.deliveryType === 1" ref="address" class="mar-t--4">
      <div class="panel add-box pad-l-10 pad-r-10 pad-t-7 pad-b-7">
        <div class="flex v-align-c">
          <div class="mar-r-8">
            <img v-if="fileSpace" mode="widthFix" class="width-19 height-19"
              :src="fileSpace + '/images/local-icon-5.png'"/>
          </div>
          <div class="flex-col flex-item">
            <div class="font-12">
              <label class="font-w">{{ customerInfo.nickname }}</label>
              <label class="mar-l-8">{{ customerInfo.phone }}</label>
            </div>
            <div class="flex v-align-c">
              <div class="font-gray font-12 flex-item mar-r-10">{{ customerInfo.address }}</div>
              <label class="action-btn font-12"
                @click="$pt.setClipboardData({data: customerInfo.nickname + ' ' + customerInfo.phone + ' ' + customerInfo.address})">
                复制</label>
            </div>            
          </div>
        </div>
      </div>
      <div class="add-line-bg mar-t--10 mar-b-10"></div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8">
      <div class="flex mar-b-10" v-if="order.orderGoodsList" v-for="(item, index) in order.orderGoodsList" :key="index" @click="goDetail(item)">
        <div class="mar-r-10">
          <img v-if="item.goodsImageUrl" :src='item.goodsImageUrl' class="img-item"/>
        </div>
        <div class="flex-item">
          <div class="flex">
            <div class="flex-item">
              <div class="goods-title">{{item.goodsTitle}}</div>
              <div class="goods-prop font-gray font-13 pad-t-11">{{ item.skuDetail }}</div>
              <div v-if="item.memberIncome && item.memberIncome > 0" class="mar-t--3 mar-b--2">
                <div class="income">赚{{ item.memberIncome }}元</div>
              </div>
              <div class="flex font-13">
                <div class="font-black flex-item">¥{{ item.goodsPrice }}</div>
                <div class="align-r"> ×{{ item.goodsNum }}件</div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8">
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">商品小计</span>
        <label>¥ {{goodsTotalPrice}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c" v-if="order.deliveryType === 1">
        <span class="flex-item">运费</span>
        <label>¥ {{order.freight}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">实付费</span>
        <label class="font-red">¥ {{order.deliveryType === 1 ? order.actualPrice : goodsTotalPrice}}</label>
      </div>
    </div>
    <!-- 平台抽点 -->
    <div v-if="false" class="panel pad-l-14 pad-r-14">
      <div class="height-50.5 flex v-align-c border-b">
        <div class="flex-item v-align-c">
          <span class="font-13 font-color-9">平台抽点（1%）</span>
        </div>
        <div>
          <span>￥50.00</span>
        </div>
      </div>
    </div>
    <!-- 身份为店长与分销商时展示，买家订单入口进来不展示 -->
    <div class="panel pad-l-14 pad-r-14" v-if="shareType || statusIs">
      <div class="height-50.5 flex v-align-c border-b" v-if="order.shareMemberId">
        <div class="flex-item v-align-c">
          <span class="font-13 font-color-9">分销商：</span>
          <img class="avatar-img mar-l-7 mar-r-11" v-if="order.shareMemberAvatar" :src="order.shareMemberAvatar" alt="">
          <label class="line-1 font-c-56">{{order.shareMemberNickname}}</label>
        </div>
        <div>
          <span class="font-13 font-color-9">分销佣金：</span>
          <span>￥{{order.shareCommission}}</span>
        </div>
      </div>
      <!-- 只在身份为店长时展示，分销商不展示，买家订单入口进来不显示 -->
      <div class="height-50.5 align-r v-align-c" v-if="statusIs">
        <span class="font-14">实收金额</span>
        <span class="font-18 color-ac font-w mar-l-9">￥{{order.memberIncome}}</span>
      </div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8 font-gray">
      <div class="pad-t-2 pad-b-2 flex flex-between">
        <div class="flex v-align-c">
          <span>订单编号：</span>
          <label>{{order.orderNo}}</label>
        </div>
        <div class="copy-btn" @click="$pt.setClipboardData({data: order.orderNo})">复制</div>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span>下单时间：</span>
        <label>{{order.createTime}}</label>
      </div>
      <div v-if="order.payTime" class="pad-t-2 pad-b-2 flex v-align-c">
        <span>支付时间：</span>
        <label>{{order.payTime}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span>订单状态：</span>
        <label>{{orderStatusType}}</label>
      </div>
      <div v-if="order.deliveryTime" class="pad-t-2 pad-b-2 flex v-align-c">
        <span>发货时间：</span>
        <label>{{order.deliveryTime}}</label>
      </div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-15 pad-b-15 height-86 font-color-9 font-13">
      <span>买家留言：</span><span class="font-color">{{order.customerComment}}</span>
    </div>
    <!-- 是买家且是我的订单入口进来且运营总后台小B客服增值功能开启时展示 -->
    <div v-if="!statusIs && !shareType && customerServiceType === 1" @click="goServiceToB(order)"
      class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8 flex v-align-c">
      <img v-if="order.memberAvatar" mode="widthFix" class="width-34 height-34 mar-r-8 contact-seller-img"
           :src="order.memberAvatar"/>
      <span class="flex-item">我是卖家，有事请联系我~</span>
      <label class="flex v-align-c contact-seller font-12 pad-l-8 pad-r-10 pad-t-4 pad-b-4">
        <img v-if="fileSpace" mode="widthFix" class="width-18 height-16 mar-r-4"
          :src="fileSpace + '/images/phone-icon-5.png'"/>
        <span>联系卖家</span>
      </label>
    </div>
    <div v-if="order.orderStatus == 0 && order.customerMemberId === getCustomerId"
      class="pad-l-14 pad-r-14 pad-t-8 pad-b-8 text-align-r bg-color-white flex v-align-c">
      <div class="flex-item"></div>
      <div class="noraml-btnon font-w font-12 pad-t-5 pad-b-5 pad-l-20 pad-r-20 mar-r-10"  @click="cancelOrder">取消订单</div>
      <div class="submit font-w font-12 pad-t-5 pad-b-5 pad-l-20 pad-r-20" @click="payOrder">确定支付</div>
    </div>
    <div class="pad-t-30"></div>
  </div>
</template>

<script>
  import {
    getOrder, payUserOrder
  } from '@/api/shop'
  import {
    cancelOrder
  } from '@/api/personal'
  import { getAuthority } from '@/api/common'
  export default {
    data() {
      return {
        customerInfo: {
          nickname: '',
          phone: '',
          address: ''
        },
        order: {},
        goodsTotalPrice: '0.00',
        orderStatusText: '',
        submitStatus: false,
        orderStatusTips: '',
        orderStatusType: '',
        totalPrice: 0,
        shareType: false, // 区分分销商与买家
        statusIs: false, // 区分买家卖家
        shopCustomerServiceAuthority: true, // 小B客服增值功能 0关闭 1开启
        customerServiceType: '' // 运营总后台增值功能 1：小B 2：企业
      }
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    mounted() {
      let personalType = this.$pt.getStorageSync('personalType')
      // 判断是否为分销商
      let shareType = this.getCurrentPage().query.shareType
      let detail = this.getCurrentPage().query.detail
      if (shareType === '1') {
        this.shareType = true
      } else {
        this.shareType = false
      }
      if (personalType === 0 || detail) {
        this.statusIs = false
      } else if (personalType === 1) {
        this.statusIs = true
      }
      this.getOrder()
    },
    methods: {
      // 获取后台 小B增值功能是否开启
      getAuthority() {
        getAuthority().then(res => {
          this.shopCustomerServiceAuthority = res.data.shopCustomerServiceAuthority
        }).catch(err => {
          console.log(err)
        })
      },
      // 跳小B客服聊天窗口
      goServiceToB(order) {
        let cId = this.$pt.getStorageSync('customerId')
        let mId = order['memberId']
        if (cId === mId) {
          this.$utils.showToast({
            title: '不能与自己聊天'
          })
        } else {
          this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + order.memberId + '&orderId=' + order['orderId'] + '&orderType=' + order.orderType})
        }
      },
      getOrder() {
        const orderId = this.getCurrentPage().query.orderId
        if (!orderId) {
          return
        }
        getOrder(orderId).then((response) => {
          if (response.isError) return
          this.order = response.data
          // 收货人信息
          this.customerInfo.nickname = this.order.customerNickname
          this.customerInfo.phone = this.order.customerPhone
          this.customerInfo.address = this.order.customerAddress
          this.customerServiceType = this.order.customerServiceType ? this.order.customerServiceType : ''
          // 获取小B客服增值功能 状态
          // this.shopCustomerServiceAuthority = this.order['shopCustomerServiceAuthority']
          switch (this.order.orderStatus) {
            case -1:
              this.orderStatusType = '已取消'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 0:
              this.orderStatusType = '未付款'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
            case 1:
              this.orderStatusType = '待发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 2:
              this.orderStatusType = '已发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 3:
              this.orderStatusType = '已收货'
              this.orderStatusText = '订单已收货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 4:
              this.orderStatusType = '已完成'
              this.orderStatusText = '订单已完成'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
          }
          if (this.order.deliveryType === 2) {
            switch (this.order.verifyStatus) {
              case 1:
                this.orderStatusType = '待核销'
                this.orderStatusText = '订单待核销'
                this.orderStatusTips = '如有问题可在下方联系卖家'
                break
              case 3:
                this.orderStatusType = '已收货'
                this.orderStatusText = '订单已收货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
                break
              case 4:
                this.orderStatusType = '已完成'
                this.orderStatusText = '订单已完成'
                this.orderStatusTips = '如有问题可在下方联系卖家'
                break
            }
          }
          let total = 0
          if (this.order && this.order.orderGoodsList) {
            this.order.orderGoodsList.forEach(goods => {
              let price = goods.goodsPrice * goods.goodsNum
              total += price
            })
          }
          this.goodsTotalPrice = total.toFixed(2)
        }).catch(() => {
        })
      },
      cancelOrder() {
        const that = this
        this.$pt.showModal({
          content: '确认取消订单？',
          success(res) {
            if (res.confirm) {
              cancelOrder({orderId: that.order.orderId, orderFrom: that.getCurrentPage().query.orderFrom}).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '取消成功' })
                that.orders = {}
                that.getOrder()
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      payOrder() {
        if (this.submitStatus) {
          // 防重复提交
          return
        }
        this.submitStatus = true
        payUserOrder(this.order.orderId).then(response => {
          if (response.isError) {
            this.submitStatus = false
            return
          }
          const that = this
          const payParams = response.data
          let resType = ''
          if (this.order.orderType === 30) {
            resType = '20'
          } else {
            resType = '10'
          }
          that.$pt.requestPayment({
            'timeStamp': payParams.timeStamp,
            'nonceStr': payParams.nonceStr,
            'package': payParams.package,
            'signType': payParams.signType,
            'paySign': payParams.paySign,
            'success': function(res) {
              that.submitStatus = false
              if (that.order.deliveryType === 1) {
                that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + that.order.actualPrice +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
              } else {
                that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + that.goodsTotalPrice +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
              }
            },
            'fail': function(res) {
              console.log(res)
              that.submitStatus = false
              if (that.order.deliveryType === 1) {
                that.$pt.navigateTo({ url: '/pages/shop/result/main?successFlag=0&price=' + that.order.actualPrice +
                  '&orderId=' + that.order.orderId + '&resType=' + resType })
              } else {
                that.$pt.navigateTo({ url: '/pages/shop/result/main?successFlag=0&price=' + that.goodsTotalPrice +
                  '&orderId=' + that.order.orderId + '&resType=' + resType })
              }
            }
          })
        })
      },
      copycustomerInfo() {
        this.$pt.setClipboardData({ data: this.customerInfo.nickname + '，' + this.customerInfo.phone + '，' + this.customerInfo.address })
      },
      queryExpress() {
        // 物流信息
        if (this.order.orderStatus === 2 || this.order.orderStatus === 3 || this.order.orderStatus === 4) {
          if (this.order.apartOrderIds.length > 1) {
            this.$pt.navigateTo({ url: `/pages/personal/order/express-view/main?orderId=${this.order.orderId}&orderFrom=${this.order.orderFrom}` })
          } else {
            this.$pt.navigateTo({ url: `/pages/personal/order/express-detail/main?orderId=${this.order.orderId}&orderFrom=${this.order.orderFrom}` })
          }
        }
      },
      goDetail(item) {
        // 去商品详情页
        this.$pt.navigateTo({ url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=10` })
      }
    }
  }
</script>

<style lang="less" scoped>
  .income{
    background: #FFE1D1;
    color: #FF5A00;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px 4px;
    line-height: 1;
    display: inline-block;
  }
  .action-btn {
    color: #333;
    background-color: #fff;
    height: 20px!important;
    line-height: 20px!important;
    padding: 0px 10px 0px 10px!important;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
  }
  .contact-seller-img{
    border-radius: 100px;
  }
  .font-red{
    color: #f94035;
  }
  .contact-seller{
    border-radius: 100px;
    border: #999999 1px solid;
    color: #999999;
  }
  .icon-arrow-right{
    color: #999;
  }
  .font-gray{
    color: #999999;
  }
  .border-t{
    border-top: #e4e4e4 1px solid;
  }
  .add-box{
    background: #f8f2cf;
    .font-gray{
      color: #666;
    }
  }
  .add-line-bg{
    background: url('https://veekrayimg.joinsun.vip/images/expree-line.png') repeat-x top;
    background-size: 52px 5px;
    height: 10px;
    width: 100%;
  }
  .type-0{
    background: #fa606c;
    color: #fff;
  }
  .type-1{
    background: #ff6600;
    color: #fff;
  }  
  .type-2{
    background: #409eff;
    color: #fff;
  }
  .type-3{
    background: #ff6600;
    color: #fff;
  }
  .type-4{
    background: #67c23a;
    color: #fff;
  }
  .type--10, .type--11{
    background: #ff6600;
    color: #fff;
  }
  .type--1{
    background: #ff6600;
    color: #fff;
  }
  .color-ac{
    color: #FF5A00;
  }
  .font-c-56{
    color: #565656;
  }
  .border-b{
    border-bottom: #F3F3F3 1px solid;
  }
  .panel{
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: 0 0 3px #ededed;
    border-top: none;
    border-bottom: none;
    position: relative;
  }
  .goods-prop{
    box-sizing: border-box;
    height: 29px;
    line-height: 1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  .goods-title {
    height: 42px;
    font-size: 15px;
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }

  .img-item {
    width: 100px;
    height: 100px;
    border-radius: 2px;
  }

  .bottom-btn {
    width: 100%;
    height: 45px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
  }

  .total {
    width: 60%;
  }
  .avatar-img{
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }

  .mini-btn {
    color: #f8c400;
    background-color: #fff;
    border-radius: 3px;
    font-size: 11px;
    padding: 0px 10px 0px 10px;
  }

  .mini-btn:after {
    border: 1px solid #f8c400;
  }
  .noraml-btnon{
    display: inline-block;
    color: #333333;
    border-radius: 100px;
    background-color: #fff;
    border: #c2c3c6 1px solid;
  }
  .submit {
    display: inline-block;
    color: #333333;
    border-radius: 100px;
    background-color: #fedc00;
    border: #fedc00 1px solid;
  }
  .arrow-right{
    position: absolute;
    right: 15px;
    top: calc(50% - 10px);
  }
  .copy-btn{
    font-size: 13px;
    width: 43px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    border-radius: 3px;
    border: 0.5px solid #CACACA;
    background: white;
  }
  .line-1{
    width: 75px;
  }
</style>
